<script setup lang="ts">

const props = defineProps<{
   options: { label: string, value: string | number, }[],
   modelValue?: number | string
}>();

const emits = defineEmits<{
   (eventName: "update:modelValue", value: number | string): void
}>();

const changeActive = (value: number | string) => {
   emits("update:modelValue", value);
};

</script>


<template>
   <div class="radio-btn">
      <a class="item" :class="{active:item.value===modelValue}" v-for="(item,index) in options" :key="index" @click="changeActive(item.value)">{{ item.label }}</a>
   </div>
</template>

<style lang="scss" scoped>
.radio-btn {
   display: flex;
   flex-wrap: wrap;

   .item {
      height: 25px;
      min-width: 60px;
      line-height: 25px;
      padding: 0 14px;
      text-align: center;
      border: 1px solid var(--cp-bg);
      background-color: var(--cp-bg);
      margin-right: 10px;
      box-sizing: border-box;
      color: var(--cp-text2);
      margin-bottom: 10px;
      border-radius: 4px;
      transition: all 0.3s;
      font-size: 12px;

      &.active {
         border-color: var(--cp-primary);
         background-color: var(--cp-plain);
      }
   }
}
</style>
